<template>
    <div>
        <div class="container mx-auto px-4 lg:pt-24 lg:pb-64">
            <div class="flex flex-wrap text-center justify-center">
                <div class="w-full lg:w-6/12 px-4">
                    <h2 class="text-4xl font-semibold text-black">宠物信息</h2>
                    <p class="text-lg leading-relaxed mt-4 mb-4 text-gray-500">
                        优质宠物信息
                    </p>
                </div>
            </div>
            <div class="flex flex-wrap mt-12 justify-center">
                <p class="mb-4 text-lg">信息列表</p>
                <div class="w-full bg-gray-100   shadow-sm p-2 ">
                    <div v-for="(item,index) in form" :key="index"
                         class="grid grid-cols-12 gap-x-1.5 my-2  divide-y divide-yellow-500 cursor-pointer"
                         @click="show(item)"
                    >
                        <div class="col-span-1">
                            <img
                                :src="item.preview"
                                class="h-24 w-24 rounded  mx-auto"
                            />
                        </div>
                        <div class="col-span-8">
                            <h3 class="no-italic text-black text-xl font-bold my-3">·{{ item.title }}</h3>
                            <p class="text-sm">
                                {{ item.description }}
                            </p>
                        </div>
                        <div class="col-span-3 flex flex-col center flex-middle">
                            <span v-if="item.price" class="text-lg text-red-600 font-bold">{{ item.price }}</span>
                            <span v-else class="text-lg text-red-600 font-bold">面议</span>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
export default {
    route: {path: '/pet/list'},
    data() {
        return {
            form: []
        }
    },
    async created() {
        this.form = await this.axios.get('article/4/pet');
    },
    methods: {
        show(item) {
            this.$router.push({name: 'index.pet.show', params: {id: item.id}});
        }
    }
}
</script>

<style scoped>

</style>
